<!DOCTYPE html><html>
<!--代码由可视化布局器拖拽生成 资源请自行下载到本地-->
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>element-由可视化布局器生成</title>
<script type="text/javascript" src="assets/drag/js/user/iframe/element/latest/components/import.js"></script>
<style>

</style>

</head>
<body style="">
<div id="magicalDragScene" class="mc-root" mc-page-id="106a01323dae49f3a0e597dc7d652a2c"><template>
	<mc-new-vxe-table id="tvfa24034080ac67eaecbc0f4af857098" :mc-dialog-footer-btn="false" :data.sync="tableList" mc-version="v2" :auto-resize="true" height="600" :mc-page-size="10" mc-query-url="magical_lowcode/openapi/crud/transactions/page?catalog=finance" mc-save-url="magical_lowcode/openapi/crud/transactions/save?catalog=finance" mc-delete-url="magical_lowcode/openapi/crud/transactions/delete-by-pk?catalog=finance" mc-query-method="post" :mc-open-pane="{'type':'drawer','width':'70%'}" mc-update-url="magical_lowcode/openapi/crud/transactions/update?catalog=finance" mc-export-url="magical_lowcode/openapi/crud/transactions/export-excel?catalog=finance" mc-layout="tb" :mc-array-fields="[]" :mc-show-order-no="true">
		<template #query-left="scope"></template>
		<template #query="scope">
			<el-card>
				<el-form mc-table-comment="所有交易记录" mcstyle="ab-unit-top:px;ab-unit-height:px" label-width="100px" size="small" :inline="true">
					<el-form-item label="交易日期">
						<mc-date-picker v-model="scope.row.priceDate" mc-java-type="Date" mc-db-name="price_date" type="datetime"></mc-date-picker>
					</el-form-item>
					<el-form-item label="交易类型">
						<mc-select v-model="scope.row.type" @focus="focus" mc-db-name="type" mc-java-type="Integer" :mc-config="{'type':'select','options':[{'k':1,'v':'现金'},{'k':2,'v':'银行转账'},{'k':3,'v':'微信转账'}]}"></mc-select>
					</el-form-item>
					<el-form-item label="交易账户">
						<mc-remote-select v-model="scope.row.accountId" @focus="focus" mc-db-name="account_id" mc-java-type="Long" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'f91d14020d51480b9788b0e9f4bc3d16'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/account/list?catalog=finance','params':[],'fields':['name','id','surplus','type'],'limit':10,'orders':[]},'pkField':'id','pkTextField':'name'}">
							<template #option="scope">
								<span class="mc-span-pane" style="width:100%">
									<mc-text>{{scope.label}}</mc-text>
								</span>
							</template>
						</mc-remote-select>
					</el-form-item>
				</el-form>
			</el-card>
		</template>
		<template #operate="scope">
			<el-col :span="24">
				<vxe-toolbar class="mc-on-shade" custom print>
					<template #buttons>
						<el-col :span="24">
							<el-button @click="scope.vue.queryTable" size="small">查询</el-button>
							<el-button @click="scope.vue.resetQueryData" size="small">重置</el-button>
							<el-button @click="scope.vue.insertData({form:{}})" size="small" type="primary">新增</el-button>
							<el-button @click="scope.vue.dbSave({data:{},confirm:true,callback:function(data){scope.vue.apiAddRow({data:{id:data.res.data}})}})" size="small" type="primary">添加行</el-button>
							<el-button @click="scope.vue.printTable('all')" size="small" type="primary">打印全部</el-button>
							<el-button @click="scope.vue.printTable('checked')" size="small" type="primary">打印勾选</el-button>
							<el-button @click="scope.vue.exportExcel('page')" size="small" type="primary">导出当前页Excel</el-button>
							<el-button @click="scope.vue.exportExcel('all')" size="small" type="primary">导出Excel</el-button>
							<mc-image-upload name="file" style="display: inline-block" :mc-show-upload-icon="false" :show-file-list="false" action="magical_lowcode/openapi/crud/transactions/import-excel?catalog=finance">
								<el-button size="small" type="warning">上传Excel</el-button>
							</mc-image-upload>
							<el-button @click="scope.vue.exportTable('all')" size="small" type="primary">导出CSV</el-button>
							<el-button @click="scope.vue.exportTable('checked')" size="small" type="primary">导出勾选CSV</el-button>
						</el-col>
					</template>
				</vxe-toolbar>
			</el-col>
		</template>
		<mc-new-vxe-table-column title="交易日期" field="priceDate" :mc-sortable="true"></mc-new-vxe-table-column>
		<mc-new-vxe-table-column title="交易金额" field="price" :mc-sortable="true"></mc-new-vxe-table-column>
		<mc-new-vxe-table-column title="交易类型" :mc-col-config="{'type':'select','options':[{'k':1,'v':'现金'},{'k':2,'v':'银行转账'},{'k':3,'v':'微信转账'}]}" field="type" :mc-sortable="true"></mc-new-vxe-table-column>
		<mc-new-vxe-table-column title="交易账户" :mc-col-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/account/list?catalog=finance','params':[],'fields':['name','id','surplus','type'],'orders':[]},'pkField':'id','pkTextField':'name'}" :mc-tmp-data="{'stage':'db','apiUuid':'','tableUuid':'f91d14020d51480b9788b0e9f4bc3d16'}" field="accountId" :mc-sortable="true"></mc-new-vxe-table-column>
		<mc-new-vxe-table-column title="操作" :mc-tmp-data="{'stage':'db','apiUuid':'','tableUuid':''}" :mc-col-config="{'type':'user','options':[],'api':{'method':'post','url':'','params':[],'fields':[]}}">
			<template #row="scope">
				<div class="mc-div-pane">
					<el-button type="text" icon="fa fa-edit" @click="scope.vue.editEvent(scope.row)">编辑</el-button>
					<el-button type="text" icon="fa fa-trash-o" @click="scope.vue.removeEvent(scope.row,scope.rowIndex)">删除</el-button>
				</div>
			</template>
		</mc-new-vxe-table-column>
		<template #form="scope">
			<el-form class="mc-vxe-table-form" mcstyle="ab-unit-top:px;ab-unit-height:px" label-width="100px" size="small" :model="scope.row">
				<el-form-item label="交易记录ID">
					<mc-input v-model="scope.row.id" mc-java-type="Integer" mc-db-name="id" mc-pk-type="IDENTITY" placeholder="自动维护无需填写" disabled="disabled"></mc-input>
				</el-form-item>
				<el-form-item label="交易账户" prop="accountId" :rules="[{'enum':[],'range':{},'_mcExtra':{'visible':false,'v1':false,'v2':false,'v3':false,'v4':false,'v5':false,'v6':false,'v7':false,'v8':false,'v9':false,'v10':false,'disabled':true,'d1':true,'d2':true,'d3':true,'d4':true,'d5':true,'d6':true,'d7':true,'d8':true,'d9':true,'d10':true},'required':true,'message':'请数入正确正数','mcType':'pn','type':'pattern','pattern':'^[+]?\\d+(\\.\\d+)?$'}]" required>
					<mc-remote-select v-model="scope.row.accountId" @focus="focus" mc-db-name="account_id" mc-java-type="Long" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'f91d14020d51480b9788b0e9f4bc3d16'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/account/list?catalog=finance','params':[],'fields':['name','id','surplus','type'],'limit':10,'orders':[]},'pkField':'id','pkTextField':'name'}">
						<template #option="scope">
							<span class="mc-span-pane" style="width:100%">
								<mc-text>{{scope.label}}</mc-text>
							</span>
						</template>
					</mc-remote-select>
				</el-form-item>
				<el-form-item label="交易类型" prop="type" required :rules="[{'enum':[],'range':{},'_mcExtra':{'visible':false,'v1':false,'v2':false,'v3':false,'v4':false,'v5':false,'v6':false,'v7':false,'v8':false,'v9':false,'v10':false,'disabled':true,'d1':true,'d2':true,'d3':true,'d4':true,'d5':true,'d6':true,'d7':true,'d8':true,'d9':true,'d10':true},'required':true,'message':'请数入正确正数','mcType':'pn','type':'pattern','pattern':'^[+]?\\d+(\\.\\d+)?$'}]">
					<mc-select v-model="scope.row.type" @focus="focus" mc-db-name="type" mc-java-type="Integer" :mc-config="{'type':'select','options':[{'k':1,'v':'现金'},{'k':2,'v':'银行转账'},{'k':3,'v':'微信转账'}]}"></mc-select>
				</el-form-item>
				<el-form-item label="交易金额" required prop="price" :rules="[{'enum':[],'range':{},'_mcExtra':{'visible':false,'v1':false,'v2':false,'v3':false,'v4':false,'v5':false,'v6':false,'v7':false,'v8':false,'v9':false,'v10':false,'disabled':true,'d1':true,'d2':true,'d3':true,'d4':true,'d5':true,'d6':true,'d7':true,'d8':true,'d9':true,'d10':true},'required':true,'mcType':'float','type':'pattern','pattern':'^(-?\\d+)(\\.\\d+)?$','message':'请数入正确小数'}]">
					<mc-input v-model="scope.row.price" mc-java-type="BigDecimal" mc-db-name="price"></mc-input>
				</el-form-item>
				<el-form-item label="交易日期">
					<mc-date-picker v-model="scope.row.priceDate" mc-java-type="Date" mc-db-name="price_date" type="datetime"></mc-date-picker>
				</el-form-item>
			</el-form>
		</template>
		<template #dialog-footer="scope">
			<span class="mc-span-pane">
				<el-button size="small" @click="scope.vue.closeDialog">取消</el-button>
				<el-button size="small" type="primary" @click="scope.vue.submitForm()" :icon="scope.loading.save?'el-icon-loading':''" :disabled="scope.loading.save">确定</el-button>
			</span>
		</template>
		<template #parent="scope"></template>
	</mc-new-vxe-table>
</template></div>
<script>
//ajax库采用axios
//调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
var vueData = {tableList : []};
var vueComputed = {};
var vueWatch = {};
var vueMethod = {focus : function (e) {try {_t.fastKey._triggerClickElem(e);}catch(e) {}}};
var vueMounted = function(){}
/*注意以上代码由系统维护,非专业人士请勿修改*/
var myMethod = {
   tabClick:function(tab){//标签页点击记住位置
         if(typeof iframeUi!= "undefined"){//发生在布局器内
             var vnodeData = tab.$parent._self.$vnode.data;
             if(vnodeData["model"]){//v-model藏得太深了
                 iframeUi.vueApi().setVueData(vnodeData.model.expression,"\""+tab.name+"\"");
               }
         }
           //解决内部如果放echarts则需要初始化一下
         setTimeout(function(){new IframeComponents().execute({action:"resize"});},200)
     }
}
for (var key in myMethod) {
    vueMethod[key] = myMethod[key];
}
//自定义覆盖data
var myData={};
var myWatch={};
var myComputed={};

 vueData.scope={row:{}};vueData.MC=window.MC;Object.assign(vueData, myData);
if(typeof vueWatch!=="undefined"&&typeof myWatch!=="undefined"){Object.assign(vueWatch, myWatch);}
if(typeof vueComputed!=="undefined"&&typeof myComputed!=="undefined"){Object.assign(vueComputed, myComputed);}
window.vueData = vueData;
window.MC.vdata = vueData;
var _t = this;
async function __executeVue(){
  if(vueMethod["beforeNewVue"]){await vueMethod.beforeNewVue(vueData,vueMethod)}
  var Ctor = Vue.extend({
    data: function() {
        return vueData;
    },
    computed:typeof vueComputed!="undefined"?vueComputed:{},
    watch:typeof vueWatch!="undefined"?vueWatch:{},
    beforeCreate: function(){window.vueMc=this;window.MC.vue=this;if(vueMethod["beforeCreate"]){vueMethod.beforeCreate()}},
    created: function(){if(vueMethod["created"]){this.created()}},
    beforeMount: function(){if(vueMethod["beforeMount"]){this.beforeMount()}},
    mounted: function(){if(vueMethod["mounted"]){this.mounted()};new IframeComponents().execute();
this.$nextTick(function () {//虚拟dom转化为真实dom后触发 这样动态新增的结构里 仍然可以被拖拽
        if(window.iframeUi&&window.iframeUi.magicalApi){
          window.iframeUi.magicalApi.addApiTask({methodName:"refreshDragEvent"});window.iframeUi.scrollRecover();parent.CommonUtil.ajaxStop();
        }
      })
if(vueMethod["afterMount"]){this.afterMount()};},
    beforeUpdate: function(){if(vueMethod["beforeUpdate"]){this.beforeUpdate()}},
    updated: function(){if(vueMethod["updated"]){this.updated()};
this.$nextTick(function () {//虚拟dom转化为真实dom后触发 这样动态新增的结构里 仍然可以被拖拽
        if(window.iframeUi&&window.iframeUi.magicalApi){
          window.iframeUi.magicalApi.addApiTask({methodName:"refreshDragEvent"});window.iframeUi.scrollRecover();parent.CommonUtil.ajaxStop();
        }
      })
},    beforeDestroy: function(){if(vueMethod["beforeDestroy"]){this.beforeDestroy()}},
    destroyed: function(){if(vueMethod["destroyed"]){this.destroyed()};},    activated: function(){if(vueMethod["activated"]){this.activated()};},    deactivated: function(){if(vueMethod["deactivated"]){this.deactivated()};},    methods: vueMethod
  });
  new Ctor().$mount('#magicalDragScene');
}
__executeVue();
</script>
</body>

</html>